<template>
  <div class="cateGory">
    <topBack class="head">
      <van-search v-model="value" placeholder="请输入搜索关键词" class="search" shape="round" />
    </topBack>
    <div class="categoryBody">
      <aside
        class="aside"
        @touchmove="touchmove"
        @touchstart="touchstart"
        @touchend="touchend"
        ref="aside"
      >
        <ul
          ref="ul"
          :style="{transform: 'translateY('+translateY+'px)'}"
          :class="{transition : flg}"
        >
          <li
            @click="navIndex = index;onClick(index)"
            :class="navIndex == index ? 'active' : ''"
            v-for="(item,index) in classify"
            :key="index"
          >{{item.kind}}</li>
        </ul>
      </aside>
      <div
        class="content"
        @touchmove="touchmoveC"
        @touchstart="touchstartC"
        @touchend="touchendC"
        ref="content"
      >
        <div
          :style="{transform: 'translateY('+translateCY+'px)'}"
          ref="categoryContent"
          :class="{transition : flgC}"
        >
          <categoryContent></categoryContent>
          <categoryContent></categoryContent>
        </div>
      </div>
    </div>
    <footerBar></footerBar>
  </div>
</template>

<script>
import topBack from "../components/topBack";
import footerBar from "../components/footerBar";
import categoryContent from "../components/categoryContent";
export default {
  components: {
    footerBar,
    topBack,
    categoryContent
  },
  data: function() {
    return {
      navIndex: 0,
      value: "",
      classify: [
        { id: 0, kind: "手机数码" },
        { id: 1, kind: "家用电器" },
        { id: 2, kind: "电脑办公" },
        { id: 3, kind: "美妆护肤" },
        { id: 4, kind: "个护清洁" },
        { id: 5, kind: "汽车生活" },
        { id: 6, kind: "京东超市" },
        { id: 7, kind: "男装" },
        { id: 8, kind: "男鞋" },
        { id: 9, kind: "女装" },
        { id: 10, kind: "女鞋" },
        { id: 11, kind: "母婴童装" },
        { id: 12, kind: "图书音像" },
        { id: 13, kind: "运动户外" },
        { id: 14, kind: "内衣配饰" },
        { id: 15, kind: "食品生鲜" },
        { id: 16, kind: "酒水饮料" },
        { id: 17, kind: "家具家装" },
        { id: 18, kind: "家居厨具" },
        { id: 19, kind: "箱包手袋" },
        { id: 20, kind: "钟表珠宝" }
      ],
      translateY: 0,
      startY: 0,
      endY: 0,
      tempY: 0,
      limtY: 0,
      flg: false,
      translateCY: 0,
      startCY: 0,
      endCY: 0,
      tempCY: 0,
      limtCY: 0,
      flgC: false
    };
  },
  methods: {
    touchstart(e) {
      console.log(e);
      this.startY = e.changedTouches[0].clientY;
      this.flg = false;
    },
    touchmove(e) {
      console.log(e);
      this.endY = e.changedTouches[0].clientY;
      //移动距离
      this.translateY = this.endY - this.startY + this.tempY;
      //向上滑不超过150
      this.translateY = this.translateY > 150 ? 150 : this.translateY;
      //向下滑不过ul高150
      this.limtY =
        this.$refs["aside"].offsetHeight - this.$refs["ul"].offsetHeight;
      // console.log(this.$refs["aside"].offsetHeight);
      // console.log(this.$refs["ul"].offsetHeight);
      // console.log(this.limtY);
      this.translateY =
        this.translateY < this.limtY - 150 ? this.limtY - 150 : this.translateY;
    },
    touchend(e) {
      //向上滑超过150回到0
      this.translateY = this.translateY >= 0 ? 0 : this.translateY;
      //向下滑超过ul高150回到0
      this.translateY =
        this.translateY <= this.limtY ? this.limtY : this.translateY;
      this.tempY = this.translateY;
      this.flg = true;
    },
    onClick(index) {
      let lih = this.$refs["ul"].offsetHeight / this.classify.length;
      this.translateY = -lih * index;
      this.translateY = this.translateY > 0 ? 0 : this.translateY;
      this.translateY =
        this.translateY <= this.limtY ? this.limtY : this.translateY;
      this.tempY = this.translateY;
    },
    touchstartC(e) {
      // console.log(e);
      this.startCY = e.changedTouches[0].clientY;
      this.flgC = false;
    },
    touchmoveC(e) {
      // console.log(e);
      this.endCY = e.changedTouches[0].clientY;
      //上次移动终点 + 此次移动距离
      this.translateCY = this.tempCY + this.endCY - this.startCY;
      //下拉上方空白不超150
      this.translateCY = this.translateCY >= 150 ? 150 : this.translateCY;
      //下上拉,空白不超150
      this.limtCY =
        this.$refs["content"].offsetHeight -
        this.$refs["categoryContent"].offsetHeight;
      // console.log(this.limtCY)
      this.translateCY =
        this.translateCY <= this.limtCY - 150
          ? this.limtCY - 150
          : this.translateCY;
      // console.log(this.translateCY)
    },
    touchendC(e) {
      // console.log(e);
      //记录上次移动后的Y
      this.translateCY = this.translateCY >= 0 ? 0 : this.translateCY;
      this.translateCY =
        this.translateCY <= this.limtCY ? this.limtCY : this.translateCY;
      this.tempCY = this.translateCY;
      this.flgC = true;
    }
  }
};
</script>

<style lang="less" scoped>
.cateGory {
  width: 100%;
  height: 100%;
  overflow: hidden;
  zoom: 1;

  .search {
    border: none;
    padding: 0;
    padding-top: 5px;
  }
  .categoryBody {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 44px 0 50px 0;
    box-sizing: border-box;

    .aside {
      width: 85px;
      height: 100%;
      float: left;

      ul {
        width: 100%;
        text-align: center;
        background: rgba(248, 248, 248);

        &.transition {
          transition: all 0.5s linear;
        }

        li {
          width: 100%;
          height: 46px;
          line-height: 46px;
          box-sizing: border-box;

          &.active {
            color: #e93b3d;
            background: white;
          }
        }
      }
    }
    .content {
      width: calc(100% - 85px);
      height: 100%;
      // background: skyblue;
      float: left;

      .transition {
        transition: all 0.5s linear;
      }
    }
  }
}
</style>